<template>
    <el-dialog :title="opData.title" v-model="opDialog" width="800" :before-close="handleClose">
            <el-form :model="opForm" ref="opRef" :rules="opRules" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="付款人" prop="drawee">
                            <el-input v-model="opForm.drawee" placeholder="请输入付款人"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="收款方式" prop="pay_method">
                            <el-select v-model="opForm.pay_method" clearable placeholder="请选择">
                                <el-option v-for="(item,index) in pay_method" :key="index" :label="item.value" :value="item.name"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="收款金额" prop="pay_money">
                            <el-input v-model="opForm.pay_money" placeholder="请输入收款金额"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="收款时间" prop="pay_time">
                            <el-date-picker v-model="opForm.pay_time" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="扣除手续费" prop="fee">
                            <el-input v-model="opForm.fee" placeholder="请输入扣除手续费"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="银行流水号" prop="pay_number">
                            <el-input v-model="opForm.pay_number" placeholder="请输入银行流水号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="opForm.remark" type="textarea" :rows="5" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button :loading="btnLoading" type="primary" @click="handleSubmit">确认</el-button>
                </div>
            </template>
        </el-dialog>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed, watch } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        props: {
            opDialog: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            opData: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            editData: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        emits: ['update:opDialog', 'handleSubmit'],
        setup(props) {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                pay_method: computed(() => store.state.configEnable.pay_method),
                //申请开票
                btnLoading: false,
                opRef: '',
                opForm: {
                    drawee: '',
                    pay_method: '',
                    pay_money: '',
                    pay_time: '',
                    fee: '',
                    pay_number: '',
                    remark: '',
                },
                opRules: {
                    drawee: [
                        { required: true, message: '请输入付款人', trigger: 'blur' }
                    ],
                    pay_method: [
                        { required: true, message: '请选择收款方式', trigger: 'blur' }
                    ],
                    pay_money: [
                        { required: true, message: '请输入收款金额', trigger: 'blur' },
                        { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输⼊正确的格式,可保留两位⼩数' }
                    ],
                    pay_time: [
                        { required: true, message: '请选择收款时间', trigger: 'blur' }
                    ],
                },

                //窗口
                opDialog: computed({
                    get: ()=>{
                        return props.opDialog
                    },
                    set: ()=>{
                        return props.opDialog
                    }
                }), 
            })

            //提交申请开票
            const handleSubmit = () => {
                state.opRef.validate((valid) => {
                    if(valid){
                        state.btnLoading = true;
                        proxy.$http.post('/oa/Lawcase/financeDetailForm',{
                            id: state.opForm.id,
                            lawcase_id: props.opData.lawcase_id,
                            finance_id: props.opData.finance_id,
                            drawee: state.opForm.drawee,
                            pay_method: state.opForm.pay_method,
                            pay_money: state.opForm.pay_money,
                            pay_time: String(state.opForm.pay_time),
                            fee: state.opForm.fee,
                            pay_number: state.opForm.pay_number,
                            remark: state.opForm.remark,
                        })
                        .then(res=> {
                            state.btnLoading = false;
                            const { code, msg ,data } = res;
                            if(code != 1){
                                return proxy.$msg.error(msg);
                            }else{
                                proxy.$refs.opRef.resetFields();
                                proxy.$msg.success('提交成功');
                                proxy.$emit('update:opDialog', false);
                                proxy.$emit('handleSubmit');
                            }
                        })
                    }
                })
            }

            //关闭申请开票
            const handleClose = () => {
                proxy.$emit('update:opDialog', false);
                proxy.$refs.opRef.resetFields();
            }
            
            //Dom加载
            onMounted(()=>{
                
            })

            //监听
            watch(props,(value)=>{
                if(props.opData.type == 2){
                    props.opData.finance_id = value.editData.finance_id;
                    props.opData.lawcase_id = value.editData.lawcase_id;
                    state.opForm = {
                        id: value.editData.id,
                        drawee: value.editData.drawee,
                        pay_method: value.editData.pay_method,
                        pay_money: value.editData.pay_money,
                        pay_time: proxy.$filter.dateTime(value.editData.pay_time),
                        fee: value.editData.fee,
                        pay_number: value.editData.pay_number,
                        remark: value.editData.remark,
                    }
                }
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                handleSubmit,
                handleClose,
                
                //组件方法
            }

        },
    })
</script>

<style scoped>
    
</style>